Ext.require([
	 'Ext.grid.*',
	 'Ext.window.Window',
	 'Ext.container.Viewport',
	 'Ext.layout.container.Border',
	 'Ext.state.*',
	 'Ext.data.*',
	 'Ext.tree.*'
]);

/**
 * Fonction qui recupere tout le parametrage de la page.
 */
function parametrages() {
	$.ajax({
 		traditional: true, 
 		type: 'POST', 
 		url: './parametrage.do',
 		target: "_blank", 
 		data : {},
 		error: function () {
 			alert('Erreur au chargement du parametrage');
 		},
 		success: function(result) { 
 			// Parametrage (libelles pour les titres des graphes) 
 			lib_marche =	result.lib_marche;
 	    	lib_pdt =		result.lib_pdt;
 	    	lib_origine =	result.lib_origine;
 	    	lib_mois =		result.lib_mois;
 	    	// Parametrage : affichage des données UGP ou pas 
 	    	ugp = result.ugp;
 	    	// Titre Top UGA ou UGPN 
 	    	if (!ugp) {
 	    		Ext.getCmp('grid2').setTitle('Top UGA');
 	    	} else {
 	 			Ext.getCmp('grid2').setTitle('Top UGPN');
 	    	}
 			// Applique les valeurs par defaut pour les listes deroulantes 
 			$('#periodId').val(result.periode);
 			// Chargement de la liste des sources 
 			var listeSource = "";
 			for (source in result.sources) {
 				listeSource += '<option value="' + result.sources[source].code +'">' + result.sources[source].libelle + '</option>';
 			}
 			$('#sourceId').html(listeSource);
 			$('#sourceId').val(result.CS_SRC); // Choix de la source dans la liste 
 			sourceIdOld = result.CS_SRC; // Sauvegarde de la source selectionnee 
 			// Chargement de l'unite 
 			$('#unitId').val(result.unite);
 			// Premiere requete : affichage de l arbre de navigation 
 			loadJsTreeWithSecto("", true); 
 			// Chargement de la liste des segments 
 			loadTreeSegments();
 			// Chargement de la liste des produits 
 			var listeProduit = "";
 			for (prod in result.mixProduit.produits) {
 				if (result.mixProduit.produits[prod].idPrstn == 0) {
 					listeProduit += '<option value="' + result.mixProduit.produits[prod].idRgpt +'">' + result.mixProduit.produits[prod].libelle + '</option>';
 				}
 			}
 			$('#productId').html(listeProduit);
 			// Chargement de la liste des indicateurs 
 			listeIndicateurs = "";
 			for (ind in result.indicateurs) {
 				listeIndicateurs += '<option value="' + result.indicateurs[ind].code +'">' + result.indicateurs[ind].libelle + '</option>';
 			}
 			// Statut du produit : complet ou pasDeMarche ou lancement ou incomplet  
 			statutProduit = result.statutProduit;
 			// Choix pour le quota entre Produit ou Marché 
 			if (statutProduit == 'complet' || statutProduit == 'lancement') {
 				$('#quotaRadioMarcheId').attr('checked', true);
 			} else if (statutProduit == 'pasDeMarche' || statutProduit == 'incomplet') {
 				$('#quotaRadioProduitId').attr('checked', true);
 				$('#quotaRadioMarcheId').attr('disabled', true);
 			}
 			// Chargement de la liste des équipes 
 			var listeEquipe = "";
 			for (eq in result.equipes) {
 				if (eq == 0) {
 					// Initialisation de la zone d'information 
 					$('#infoEquipe').html(result.equipes[eq].libelle);
 				}
 				listeEquipe += '<option value="' + result.equipes[eq].code +'">' + result.equipes[eq].libelle + '</option>';
 			}
 			$('#activite-equipe-id').html(listeEquipe);
 			// Chargement de la liste des spécialités 
 			var listeSpecialite = "";
 			for (spe in result.specialites) {
 				if (spe == 0) {
 					// Initialisation de la zone d'information 
 					$('#infoSpecialite').html(result.specialites[spe].libelle);
 				}
 				listeSpecialite += '<option value="' + result.specialites[spe].code +'">' + result.specialites[spe].libelle + '</option>';
 			}
 			$('#activite-specialite-id').html(listeSpecialite);
			// Mise à jour de la partie : informations
			refreshInformations();
			// Lors du premier clic sur le bouton 'Choix produits', il faudra charger l'arbre   
	    	firstCallTreeProducts = true;
 		}
 	}); 
}


/**
 * Changement du type d'analyse pour la carto.
 */
function refreshTypeCarto() {
	if ($('#analyseCartoHieId').get(0).checked) {
		$('#cartoIndicateur0').css("display", "");
		$('#cartoIndicateur1').css("display", "none");
		$('#cartoIndicateur2').css("display", "none");
		$('#buttonSaveTwoLegendes').css("display", "block");
	} else if ($('#analyseCartoIsoId').get(0).checked) {
		$('#cartoIndicateur0').css("display", "none");
		$('#cartoIndicateur1').css("display", "");
		$('#cartoIndicateur2').css("display", "");
		$('#buttonSaveTwoLegendes').css("display", "none");
	}
	// Rafraichissement de la carto
	var carto = Ext.getCmp('carto');
	if (!carto.hidden && idGeog != 0 && idGeog != '') { // On ne dessine pas au niveau France 
		cleanCarto();
		$('#regionCanvas').empty();
		$('#secteurCanvas').empty();
		$('#loaderCanvasRegion').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/world-loader.gif' style='padding-right:5px;' /></div>");
		$('#loaderCanvasSecteur').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/world-loader.gif' style='padding-right:5px;' /></div>");
		// Dessin des legendes et des graphes 
		dessinerLegendeCartoRegion(globalNivGeog, idGeog, "true");//"false"); 
		dessinerRegion(globalNivGeog, idGeog, "true");
		dessinerSecteur(globalNivGeog, idGeog, -1, -1, true, "true");
	}
}


/**
 * Fonction de rafraichissement des graphes ou de la carto (selon l'onglet actif).
 */
function refreshCharts() {
	if (!firstCallRefreshCharts) {
		// Refresh the charts  
		var graphDyn = Ext.getCmp('graphDyn');
		if (!graphDyn.hidden) {
			$("#buttonConfigId").css("display", "none");
			$("#graphDynamic").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
			loadGraphDynamic(globalNivGeog, globalGeog, idGeog);
		}
		var graphWF = Ext.getCmp('graphWF');
		if (!graphWF.hidden) {
			$("#graphWaterfall").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
			if (globalNivGeog == 'UGA') {
	  			var elem = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).id.split("-");
				var geogTmp = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).textContent.replace(/\s/g, "");
	  			loadGraphWaterfall(elem[1], geogTmp, elem[0]);
			} else {
				loadGraphWaterfall(globalNivGeog, globalGeog, idGeog);
			}
		}
		var graphBub = Ext.getCmp('graphBub');
		if (!graphBub.hidden) {
			$("#graphBubble").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
			if (globalNivGeog == 'UGA' && !ugp) {
	  			var elem = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).id.split("-");
				var geogTmp = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).textContent.replace(/\s/g, "");
	  			loadGraphBubble(elem[1], geogTmp, elem[0]);
			} else {
				loadGraphBubble(globalNivGeog, globalGeog, idGeog);
			}
		}
		var graphDel = Ext.getCmp('graphDel');
		if (!graphDel.hidden) {
			$("#graphDeltaPm").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
			loadGraphDeltaPm(globalNivGeog, globalGeog, idGeog);
		}
		var eastGraphQuota = Ext.getCmp('eastGraphQuota');
		if (!eastGraphQuota.hidden) {
			$("#graphQuota").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
			loadGraphQuota(globalNivGeog, globalGeog, idGeog);
		}
		// Rafraichissement de la carto
		var carto = Ext.getCmp('carto');
		if (!carto.hidden && idGeog != 0 && idGeog != '') { // On ne dessine pas au niveau France 
			cleanCarto();
			$('#regionCanvas').empty();
			$('#secteurCanvas').empty();
			$('#loaderCanvasRegion').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/world-loader.gif' style='padding-right:5px;' /></div>");
			$('#loaderCanvasSecteur').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/world-loader.gif' style='padding-right:5px;' /></div>");
			// Dessin des legendes et des graphes 
			dessinerLegendeCartoRegion(globalNivGeog, idGeog, "true");//"false"); 
			dessinerRegion(globalNivGeog, idGeog, "true");
			dessinerSecteur(globalNivGeog, idGeog, -1, -1, true, "true");
		}
	} else {
		firstCallRefreshCharts = false;
	}
}


/** 
 * Fonction pour rafraichir les graphes quota et deltaPm apres clic sur le choix du quota.
 * Et graphe en bulles.
 */
function refreshQuotaAndDeltaPM() {
	var graphDel = Ext.getCmp('graphDel');
	if (!graphDel.hidden) {
		$("#graphDeltaPm").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
		loadGraphDeltaPm(globalNivGeog, globalGeog, idGeog);
	}
	var eastGraphQuota = Ext.getCmp('eastGraphQuota');
	if (!eastGraphQuota.hidden) {
		$("#graphQuota").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
		loadGraphQuota(globalNivGeog, globalGeog, idGeog);
	}
	var graphBub = Ext.getCmp('graphBub');
	if (!graphBub.hidden) {
		$("#graphBubble").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
		if (globalNivGeog == 'UGA' && !ugp) {
  			var elem = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).id.split("-");
			var geogTmp = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).textContent.replace(/\s/g, "");
  			loadGraphBubble(elem[1], geogTmp, elem[0]);
		} else {
			loadGraphBubble(globalNivGeog, globalGeog, idGeog);
		}
	}
	// Partie information 
	var quota = "";
	if ($('#quotaRadioMarcheId').get(0).checked) {
		quota = 'March&eacute;';
	} else if ($('#quotaRadioProduitId').get(0).checked) {
		quota = 'Produit';
	}
	$('#infoQuota').html(quota);
	
	$('#bubbleQuotaSpan').html("quota" + quota);
}


/**
 * Chargement de la page.
 */
Ext.onReady(function() {
	
	Ext.create('Ext.container.Viewport', {
		layout: 'border',
		items: [
		
		// REGION OUEST 
		{
			region: 'west',
			weight: -1,
			id: 'westZone',
			split: true,		// redimensionnement 
			collapsible: true,
			title: 'Secto',
			width: '18%',
			//layout: 'accordion',
			layout: { // Gestion de l'accordion 
		        type: 'accordion',
		        titleCollapse: false,
		        animate: true,
		        activeOnTop: true,
		        expandedItem:false,
		        multi: true
		    },
			items: [
				{
					title: 'Navigation',
					iconCls: 'nav',
					autoScroll: true,
					html: [
				       '<div id="leftMenu">',
				       '<div style="width:200px;padding-top:2px;">',
				       		'<div align="center" style="float:left;width:160px;"><input style="" type="search" name="search" id="mySearchInput" value="" /></div>',
				       		'<div id="backHome" align="center" style="float:right;width:40px;"></div>',
				       '</div>',
				       '<div id="myTree" style="float:left;">',
				       		'<img src="img/ajax-loader.gif" style="padding-right:5px;" />',
				       '</div>',
				       '</div>'
					]
				},
				{
					title: 'Settings',
					autoScroll: true,
					collapsed : true,
					html: [
						'<table>',
							'<tr><td class="text-general" colspan="2" align="center"><b>------ Ventes ------</b></td></tr>',
							'<tr>',
								'<td class="text-general">',
									'Produit :',
								'</td>',
								'<td class="text-general" id="statesProducts">',
									'<select name="select-choice-0" data-mini="true" class="mySelect" id="productId">',
									'</select>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'P&eacute;riode :',
								'</td>',
								'<td class="text-general" id="statesPeriods">',
									'<select name="select-choice-0" data-mini="true" class="mySelect" id="periodId">',
										'<option value="MM">Mensuel</option>',
										'<option value="CF">Cumul Fixe</option>',
										'<option value="CC">Cumul Mobile 3 mois</option>',
										'<option value="CA">Cumul Mobile Annuel</option>',
									'</select>',
								'</td>',
							'</tr>',
							'<tr id="lineSource">',
								'<td class="text-general">',
									'Source :',
								'</td>',
								'<td class="text-general" id="statessources">',
									'<select name="select-choice-0" data-mini="true" class="mySelect" id="sourceId">',
									'</select>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'Unit&eacute; :',
								'</td>',
								'<td class="text-general" id="statesUnits">',
									'<select name="select-choice-0" data-mini="true" class="mySelect" id="unitId">',
										'<option value="UN">Unit&eacute;</option>',
										'<option value="CA">Chiffre d\'affaire</option>',
										'<option value="JT">Unit&eacute; &eacute;quivalente</option>',
									'</select>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'Quota :',
								'</td>',
								'<td class="text-general">',
									'<input type="radio" name="quotaRadio" value="QP" id="quotaRadioProduitId" onclick="javascript:refreshQuotaAndDeltaPM();">Produit',
									'<input type="radio" name="quotaRadio" value="QM" id="quotaRadioMarcheId" onclick="javascript:refreshQuotaAndDeltaPM();">March&eacute;',
								'</td>',
							'</tr>',
							
							'<tr><td colspan="2" style="height:10px;"></td></tr>',
							'<tr><td class="text-general" colspan="2" align="center"><b>------ Activit&eacute; ------</b></td></tr>',
							'<tr>',
								'<td class="text-general">',
									'Equipe :',
								'</td>',
								'<td class="text-general" id="statesEquipes">',
									'<select class="mySelect" id="activite-equipe-id">',
									'</select>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'P&eacute;riode :',
								'</td>',
								'<td class="text-general" id="statesPeriodes">',
									'<select class="mySelect" id="activite-periode-id">',
										'<option value="CF">Cumul Fixe</option>',
										'<option value="MM">Mensuel</option>',
									'</select>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'Sp&eacute;. :',
								'</td>',
								'<td class="text-general" id="statesSpecialites">',
									'<select class="mySelect" id="activite-specialite-id">',
									'</select>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general" valign="top">',
									'Segments :',
								'</td>',
								'<td class="text-general" id="treeSegments">',
								'</td>',
							'</tr>',
							
							'<tr><td colspan="2" style="height:10px;"></td></tr>',
							'<tr><td class="text-general" colspan="2" align="center"><b>------ Carto ------</b></td></tr>',
							'<tr>',
								'<td class="text-general">',
									'Analyse :',
								'</td>',
								'<td class="text-general">',
									'<input type="radio" name="analyseCarto" value="HIE" id="analyseCartoHieId" onclick="javascript:refreshTypeCarto();" checked="checked">Hi&eacute;rarchique',
									'<input type="radio" name="analyseCarto" value="ISO" id="analyseCartoIsoId" onclick="javascript:refreshTypeCarto();">IsoGeog',
								'</td>',
							'</tr>',
							'<tr id="cartoIndicateur0">',
								'<td class="text-general">',
									'Indicateur :',
								'</td>',
								'<td class="text-general" id="statesIndicateurs">',
									'<select class="mySelect" id="carto-indicateur-id">',
										'<option value="PM"			>PM</option>',
										'<option value="D_PM"		>&Delta;PM</option>',
										'<option value="VOL"		>VOL</option>',
										'<option value="D_VOL"		>&Delta;VOL</option>',
										'<option value="EVOL_VOL"	>EVOL VOL</option>',
										'<option value="COUV"		>Couverture</option>',
										'<option value="FREQ"		>Fr&eacute;quence</option>',
										'<option value="VOL_M"		>Volume mention</option>',
									'</select>',
								'</td>',
							'</tr>',
							'<tr id="cartoIndicateur1" style="display:none;">',
								'<td class="text-general">',
									'Indicateur 1 :',
								'</td>',
								'<td class="text-general" id="statesIndicateurs1">',
									'<select class="mySelect" id="carto-indicateur-id-1">',
										'<option value="PM"			>PM</option>',
										'<option value="D_PM"		>&Delta;PM</option>',
										'<option value="VOL"		>VOL</option>',
										'<option value="D_VOL"		>&Delta;VOL</option>',
										'<option value="EVOL_VOL"	>EVOL VOL</option>',
										'<option value="COUV"		>Couverture</option>',
										'<option value="FREQ"		>Fr&eacute;quence</option>',
										'<option value="VOL_M"		>Volume mention</option>',
									'</select>',
								'</td>',
							'</tr>',
							'<tr id="cartoIndicateur2" style="display:none;">',
								'<td class="text-general">',
									'Indicateur 2 :',
								'</td>',
								'<td class="text-general" id="statesIndicateurs2">',
									'<select class="mySelect" id="carto-indicateur-id-2">',
										'<option value="PM"			>PM</option>',
										'<option value="D_PM"		>&Delta;PM</option>',
										'<option value="VOL"		>VOL</option>',
										'<option value="D_VOL"		>&Delta;VOL</option>',
										'<option value="EVOL_VOL"	>EVOL VOL</option>',
										'<option value="COUV"		>Couverture</option>',
										'<option value="FREQ"		>Fr&eacute;quence</option>',
										'<option value="VOL_M"		>Volume mention</option>',
									'</select>',
								'</td>',
							'</tr>',
							
						'</table>'
					],
					iconCls: 'settings'
				},
				{
					title: 'Informations',
					autoScroll: true,
					collapsed : true,
					html: ['<table>',
					       '<tr><td class="text-general" colspan="2" align="center"><b>------ Ventes ------</b></td></tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>Produit :</b>',
								'</td>',
								'<td id="infoProduct" class="text-general">',
									'Seretide',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>P&eacute;riode :</b>',
								'</td>',
								'<td id="infoPeriode" class="text-general">',
									'Mensuel',
								'</td>',
							'</tr>',
							'<tr id="lineSourceInfo">',
								'<td class="text-general">',
									'<b>Source :</b>',
								'</td>',
								'<td id="infoSource" class="text-general">',
									'SS',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>Unit&eacute; :</b>',
								'</td>',
								'<td id="infoUnite" class="text-general">',
									'Unit&eacute;',
								'</td>',
							'</tr>',
							'<tr><td class="text-general" colspan="2" align="center"><b>------ Quota ------</b></td></tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>Quota :</b>',
								'</td>',
								'<td id="infoQuota" class="text-general">',
									'Produit',
								'</td>',
							'</tr>',
							'<tr><td class="text-general" colspan="2" align="center"><b>------ Activit&eacute; ------</b></td></tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>Equipe :</b>',
								'</td>',
								'<td id="infoEquipe" class="text-general">',
									'',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>P&eacute;riode :</b>',
								'</td>',
								'<td id="infoPeriodeActivite" class="text-general">',
									'Mensuel',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>Sp&eacute;. :</b>',
								'</td>',
								'<td id="infoSpecialite" class="text-general">',
									'',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>Segment :</b>',
								'</td>',
								'<td id="infoSegment" class="text-general">',
									'A+B+C+D',
								'</td>',
							'</tr>',
							// TODO: 
//							'<tr><td class="text-general" colspan="2" align="center"><b>------ Carto ------</b></td></tr>',
//							'<tr>',
//								'<td class="text-general">',
//									'<b>Indicateur :</b>',
//								'</td>',
//								'<td id="infoIndicateur" class="text-general">',
//									'PM',
//								'</td>',
//							'</tr>',
						'</table>'
					],
					iconCls: 'info'
				},
				{
					title: 'Niveau',
					autoScroll: true,
					collapsed : true,
					html: [
						'<table>',
							'<tr>',
								'<td id="infoSudTypeNiveau" class="text-general" style="font-weight:bold;">',
									'France :',
								'</td>',
								'<td id="infoSudNiveau" class="text-general">',
									'',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>PM :</b>',
								'</td>',
								'<td id="infoSudPM" class="text-general">',
									'',
								'</td>',
							'</tr>',
							'<tr>',
								'<td class="text-general">',
									'<b>&Delta;PM :</b>',
								'</td>',
								'<td id="infoSudDeltaPM" class="text-general">',
									'',
								'</td>',
							'</tr>',
						'</table>'
					],
					iconCls: 'info'
				}
			],
			listeners: {
				resize: function () {
					if (resizeWest) {
		                if (!firstDisplay) { 
		                	refreshCharts();
		                }
					} else {
						resizeWest = true;
					}
	            },
	            collapse: function () {
	            	westOpen = false;
	            	refreshCharts();
	            },
	            expand: function () {
	            	westOpen = true;
	            	refreshCharts();
	            }
	        }
		}, 
		
		// REGION CENTRE
		{
			region: 'center',
            split: true,			// redimensionnement 
			xtype: 'tabpanel', 
			deferredRender: false,	// chargement de tous les onglets
			activeTab: 0,			// First tab active by default
			autoScroll: true,
			items: [
				{
					title: 'PM mensuelles',
					xtype: 'panel',
					html: [
					       '<div align="left" id="buttonConfigId" style="z-index:5;position:relative;left:33px;top:10px;height:0px;display:none;"></div>',
					       '<div id="graphDynamic" style="width:100%;height:100%;"><img src="img/ajax-loader.gif" style="padding-right:5px;" /></div>',
					       ],
					id: 'graphDyn'
				},
				{
					title: 'Implantation (bulles)',
					xtype: 'panel',
					html: [
					       '<div align="left" id="buttonConfigBubbleId" style="z-index:5;position:relative;left:33px;top:10px;height:0px;"></div>',
					       '<div align="left" id="buttonBubbleBack"     style="z-index:5;position:relative;left:60px;top:10px;height:0px;"></div>',
					       '<div id="graphBubble" style="width:100%;height:100%;"></div>'],
					id: 'graphBub' 
				},
				{
					title: 'Delta PM',
					xtype: 'panel',
					html: [
					   '<div align="left" id="buttonConfigDeltaPMId" style="z-index:5;position:relative;left:33px;top:10px;height:0px;"></div>',
				       '<div id="graphDeltaPm" style="width:100%;height:90%;"></div>',
				       '<div align="center" id="legendeGraphDeltaPm">',
					       '<table>',
							   	'<tr>',
							   		'<td>',
							   			 '<input type="checkbox" name="checkbox-6" id="checkbox-france" class="custom" checked onclick="javascript:displayFranceGraphDeltaPm();" />',
							   		'</td>',
							   		'<td class="text-general">France</td>',
							   		'<td>',
							   			'<input type="checkbox" name="checkbox-7" id="checkbox-zone" class="custom" checked onclick="javascript:displayZoneGraphDeltaPm();" />',
							   		'</td>',
							   		'<td class="text-general">Zone</td>',
							   		'<td>',
							   			'<input type="checkbox" name="checkbox-8" id="checkbox-region" class="custom" checked onclick="javascript:displayRegionGraphDeltaPm();" />',
							   		'</td>',
							   		'<td class="text-general">R&eacute;gion</td>',
							   	'</tr>',
							'</table>',
						'</div>'
					],
					id: 'graphDel'
				},
				{
					title: 'Contribution geog',
					xtype: 'panel',
					html: [
					       '<div id="graphWaterfall" style="width:100%;height:90%;"></div>'],
					id: 'graphWF' 
				},
				{
					title: 'Carto',
					xtype: 'panel',
					autoScroll: true,
					//margin : '2 2 2 2',
					html: [
							'<div style="width:1012px;margin:2px;">',
								'<div id="secteurCanvasInfos" class="text-general" style="float:right;width:506px;height:45px;display:none;">',
								    '<table>',
								    		'<tr>',
									       		'<td id="libNiveauId" style="font-weight:bold;"></td>',
									       		'<td id="secteurCanvasPmId"></td>',
									       		'<td id="secteurCanvasDeltaPMId"></td>',
									       		'<td id="secteurCanvasVolId"></td>',
									       		'<td id="secteurCanvasDeltaVolId"></td>',
									       		'<td id="secteurCanvasEvolId"></td>',
								    		'</tr>',
								    		'<tr>',
								    			'<td id="secteurCanvasUga" style="font-weight:bold;"></td>',
									       		'<td id="secteurCanvasUgaPmId"></td>',
									       		'<td id="secteurCanvasUgaDeltaPMId"></td>',
									       		'<td id="secteurCanvasUgaVolId"></td>',
									       		'<td id="secteurCanvasUgaDeltaVolId"></td>',
									       		'<td id="secteurCanvasUgaEvolId"></td>',
								    		'</tr>',
								    '</table>',
								'</div>',
								'<div id="regionCanvasInfos" class="text-general" style="float:left;width:506px;height:45px;display:none;">',
								    '<table>',
								    		'<tr>',
								    			'<td id="zoneNavId" style="font-weight:bold;max-width:170px;"></td>',
								    			'<td id="regionCanvasPmId"></td>',
								    			'<td id="regionCanvasDeltaPMId"></td>',
								    			'<td id="regionCanvasVolId"></td>',
								    			'<td id="regionCanvasDeltaVolId"></td>',
								    			'<td id="regionCanvasEvolId"></td>',
								    		'</tr>',
								    		'<tr>',
								    			'<td id="regionCanvasUga" style="font-weight:bold;"></td>',
									       		'<td id="regionCanvasUgaPmId"></td>',
									       		'<td id="regionCanvasUgaDeltaPMId"></td>',
									       		'<td id="regionCanvasUgaVolId"></td>',
									       		'<td id="regionCanvasUgaDeltaVolId"></td>',
									       		'<td id="regionCanvasUgaEvolId"></td>',
								    		'</tr>',
								    '</table>',
								'</div>',
							'</div>',
					       '<div style="width:1012px;margin:2px;">',
						       '<div style="float:right;width:506px;height:506px;" id="divSecteur">',
							       '<div id="loaderCanvasSecteur" class="text-general"></div>',
							       '<div id="secteurCanvas"></div>',
						       '</div>',  
						       '<div style="float:left;width:506px;height:506px;" id="divRegion">',
							       '<div id="loaderCanvasRegion" class="text-general"></div>',
							       '<div id="regionCanvas" class="text-general">Veuillez s&eacute;lectionner un niveau ...</div>',
						       '</div>',
						   '</div>',
					       '<div id="infobulle"></div>',
					       '<div id="infobulleregion"></div>',
					       '<div id="legende1" style="width:1012px;display:none;margin:2px;">',
					       		'<div id="legendesRegion" class="text-general" style="float:left;width:506px;">',
						       		'<table class="text-general">',
								   		'<tr>',
								   			'<td></td>',
								   			'<td>',
								   				'<div class="text-general" style="float:left;">',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion1" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion2" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion3" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion4" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion5" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion6" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteRegion7" style="display:none;" />',
								   				'</div>',
								   				'<div id="buttonCartoRegion"		style="float:left;padding-top:3px;padding-left:4px;"></div>',
								   				'<div id="buttonCartoRegionBack"	style="float:left;padding-top:3px;padding-left:4px;"></div>',
								   			'</td>',
								   		'</tr>',
								   		'<tr>',
								   			'<td align="right" id="legendeDeIdRegion" style="width:45px;">de</td>',
								   			'<td>',
								   				'<div id="legendesMin" class="text-general">',
								   					'<div id="legendePaletteMinRegion1Div" class="legendePaletteRegionSecteurClass">0</div>', 
								   					'<div id="legendePaletteMinRegion2Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMinRegion3Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMinRegion4Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMinRegion5Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMinRegion6Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMinRegion7Div" class="legendePaletteRegionSecteurClass"></div>',
								   				'</div>',
								   			'</td>',
								   		'</tr>',
								   		'<tr>',
								   			'<td align="right" id="legendeAIdRegion">&agrave;</td>',
								   			'<td>',
								   				'<div class="text-general">',
								   					'<div id="legendePaletteMaxRegion1Div" class="legendePaletteRegionSecteurClass">0</div>', 
								   					'<div id="legendePaletteMaxRegion2Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMaxRegion3Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMaxRegion4Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMaxRegion5Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMaxRegion6Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMaxRegion7Div" class="legendePaletteRegionSecteurClass"></div>',
								   				'</div>',
								   			'</td>',
								   		'</tr>',
								   	'</table>',
					       		'</div>',
					       		'<div id="legendesSecteur" class="text-general" style="float:left;width:506px;">',
							   		'<table class="text-general">',
								   		'<tr>',
								   			'<td></td>',
								   			'<td>',
								   				'<div class="text-general" style="float:left;">',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur1" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur2" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur3" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur4" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur5" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur6" style="display:none;" />&nbsp;&nbsp;',
									   				'<input type="text" class="legendePalette" id="legendePaletteSecteur7" style="display:none;" />',
								   				'</div>',
								   				'<div id="buttonCartoSecteur"		style="float:left;padding-top:3px;padding-left:4px;"></div>',
								   				'<div id="buttonCartoSecteurBack"	style="float:left;padding-top:3px;padding-left:4px;"></div>',
								   			'</td>',
								   		'</tr>',
								   		'<tr>',
								   			'<td align="right" id="legendeDeIdSecteur" style="width:45px;">de</td>',
								   			'<td>',
								   				'<div id="legendesMin" class="text-general">',
								   					'<div id="legendePaletteMinSecteur1Div" class="legendePaletteRegionSecteurClass">0</div>', 
								   					'<div id="legendePaletteMinSecteur2Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMinSecteur3Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMinSecteur4Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMinSecteur5Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMinSecteur6Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMinSecteur7Div" class="legendePaletteRegionSecteurClass"></div>',
								   				'</div>',
								   			'</td>',
								   		'</tr>',
								   		'<tr>',
								   			'<td align="right" id="legendeAIdSecteur">&agrave;</td>',
								   			'<td>',
								   				'<div class="text-general">',
								   					'<div id="legendePaletteMaxSecteur1Div" class="legendePaletteRegionSecteurClass">0</div>', 
								   					'<div id="legendePaletteMaxSecteur2Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMaxSecteur3Div" class="legendePaletteRegionSecteurClass">0</div>',
								   					'<div id="legendePaletteMaxSecteur4Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMaxSecteur5Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMaxSecteur6Div" class="legendePaletteRegionSecteurClass"></div>',
								   					'<div id="legendePaletteMaxSecteur7Div" class="legendePaletteRegionSecteurClass"></div>',
								   				'</div>',
								   			'</td>',
								   		'</tr>',
								   	'</table>',
					       		'</div>',
					       '</div>'
					       ],
					id: 'carto'
				}
			],
			listeners: {
		        render: function() {
		            this.items.each(function(i){
		                i.tab.on('click', function() {
		                	if (i.id == 'graphDyn') {
		                		loadGraphDynamic(globalNivGeog, globalGeog, idGeog);
		                	}
		                	if (i.id == 'graphWF') {
		                		if (globalNivGeog == 'UGA') {
		            	  			var elem = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).id.split("-");
		            				var geogTmp = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).textContent.replace(/\s/g, "");
		            	  			loadGraphWaterfall(elem[1], geogTmp, elem[0]);
		                		} else {
		                			loadGraphWaterfall(globalNivGeog, globalGeog, idGeog);
		                		}
		                	}
		                	if (i.id == 'graphBub') {
		                		if (globalNivGeog == 'UGA' && !ugp) {
		            	  			var elem = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).id.split("-");
		            				var geogTmp = $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a").get(0).textContent.replace(/\s/g, "");
		            	  			loadGraphBubble(elem[1], geogTmp, elem[0]);
		            			} else {
		            				loadGraphBubble(globalNivGeog, globalGeog, idGeog);
		            			}
		                	}
		                	if (i.id == 'graphDel') {
		                		loadGraphDeltaPm(globalNivGeog, globalGeog, idGeog);
		                	}
		                	if (i.id == 'graphDyn' || i.id == 'graphBub' || i.id == 'graphDel') {
		                		if (westOpen) {
		                			var panel = Ext.getCmp('westZone');
			                		panel.expand();
		                		}
		                		if (eastOpen) {
		                			var panel = Ext.getCmp('eastGraphQuota');
			                		panel.expand();
		                		}
		                		if (southOpen) {
		                			var panel = Ext.getCmp('southZone');
			                		panel.expand();
		                		}
		                	}
		                	if (i.id == 'carto') {
		                		cartoOpen = true;
		                		// On ferme la zone est : graphe quota 
		                		var panel = Ext.getCmp('eastGraphQuota');
		                		panel.collapse();
		                		// On ferme la zone sud 
		                		var panelSouth = Ext.getCmp('southZone');
		                		panelSouth.collapse();
		                	}
		                });
		            });
		        }
		    }
		}, 
		
		// REGION SUD 
		{
			region: 'south',
			weight: -2,
            split: true,			// redimensionnement 
			id: 'southZone',
			collapsible: true,
			//xtype: 'tabpanel', 
			//deferredRender: false,	
			//activeTab: 0,			
			height: '38%',
			title: 'Listes',
			layout: 'border',
			items: [
		        {
		        	region:'center',
		        	collapsible: true,
		        	xtype: 'container',
					layout: 'border',
					width:'100%',
					items: [
						{
							region:'east',
							split: true,			// redimensionnement 
							width:'100%',
							xtype: 'tabpanel',
							deferredRender: false,	// chargement de tous les onglets
							activeTab: 0,			// First tab active by default
							items: [
								{
									title: '',
									xtype: 'panel',
									layout: 'fit', 
									autoScroll: true,
									html: ['<div id="grid"></div>'],
									id: 'grid2'
								},
								// TODO: 
//								{
//									title: 'D&eacute;tails march&eacute;',
//									xtype: 'panel',
//									html: ['<div id="treePanel"></div>'],
//									id: 'grid1'
//								},
								{
									title: 'M&eacute;decins',
									xtype: 'panel',
									layout: 'fit',
									autoScroll: true,
									html: ['<img id="loadGridDoctorsImg" src="img/ajax-loader.gif" style="padding-right:5px;" /><div id="gridDoctors"><img src="img/ajax-loader.gif" style="padding-right:5px;" /></div>'],
									id: 'grid3'
								}
							],
							listeners: {
						        render: function() {
						            this.items.each(function(i){
						                i.tab.on('click', function() {
						                	if (i.id == 'grid2') {
						                		// Au clic sur le 1er onglet 
						                		$('#grid').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/ajax-loader.gif' style='padding-right:5px;' /></div>");
						                		if (!ugp) {
						                			loadGridUGA("");
						                		} else {
						                			loadGrid(""); 
						                		}
						                	}
						                	if (i.id == 'grid1') {
						                		// Au clic sur le 2e onglet 
						                		$('#treePanel').html("<div align='center' style='padding-top:20px;'><div>En cours de developpement</div></div>");
						                		// TODO: A FAIRE 
//						                		$('#treePanel').html("<div align='center' style='padding-top:20px;'><div>Attention ce traitement peut prendre plusieurs minutes, veuillez patienter ...</div><img src='img/ajax-loader.gif' style='padding-right:5px;' /></div>");
//						                		loadTreePanel();
						                	}
						                	if (i.id == 'grid3') {
						                		// Au clic sur le 3e onglet
						                		//$('#grid3').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/ajax-loader.gif' style='padding-right:5px;' /><div id='gridDoctors'></div></div>");
						                		//$('#gridDoctors').html("<div align='center' style='padding-top:20px;'><div>Veuillez patienter ...</div><img src='img/ajax-loader.gif' style='padding-right:5px;' /></div>");
						                		$('#loadGridDoctorsImg').css("display", "block");
						                		loadGridDoctors(); 
						                	}
						                });
						            });
						        },
						        collapse: function () {
						        	refreshCharts();
					            },
					            expand: function () {
					            	refreshCharts();
					            }
						    }
						}
					]
		        }
			],
			listeners: {
				collapse: function () {
					if (!cartoOpen) {
		        		southOpen = false;
		        	} else {
		        		cartoOpen = !cartoOpen;
		        	}
					refreshCharts();
				},
				expand: function () {
	            	southOpen = true;
	            	refreshCharts();
				}
			}
		}, 
		
		// REGION EST 
		{
			region: 'east',
            split: true,			// redimensionnement 
			collapsible: true,
			//collapsed: true,		// ferme par defaut
			width: '30%',
			title: 'Graphe quota',
			layout: 'accordion',
			id: 'eastGraphQuota',
			items: [
				{
					html: ['<div id="graphQuota" style="width:100%;height:100%;"><img src="img/ajax-loader.gif" style="padding-right:5px;" /></div>'], 
					autoScroll: true
				}
			],
			listeners: {
				resize: function () {
					if (resizeEast) {
		                if (!firstDisplay) { 
		                	refreshCharts();
		                }
					} else {
						resizeEast = true;
					}
	            },
	            collapse: function () {
	            	if (!cartoOpen) {
	            		eastOpen = false;
	            	}
	            	$("#graphQuota").css("display", "none");
	            	refreshCharts();
	            },
	            expand: function () {
	            	eastOpen = true;
	            	$("#graphQuota").css("display", "block");
	            	refreshCharts();
	            }
	        }
		}
		
		]
	});
	
	// Evenements liés à la page 
	$(function() { 
		
		// Filtre l'arbre de navigation  
	    $("#mySearchInput").bind("change", function(event, ui) { 
	    	loadJsTreeWithSecto(this.value, true);
		});
	    
		// Changement des valeurs des listes du parametrage (produit, periode ou source)  
		$(".mySelect").bind("change", function(event, ui) {
			
			var sourceIdNew = $('#sourceId').val();
			refreshUGP();
			if (this.id == 'sourceId') {
				// Initialisation du mix produit 
				initializeMixProduit();
				firstCallTreeProducts = true;
			} else if (this.id == 'unitId' || this.id == 'periodId') {
				// Lors du changement d'unité ou de période 
				loadJsTreeWithSecto("", false); 
				refreshCharts();
			} else {
				// Refresh the charts and carto 
				refreshCharts();
			}
			sourceIdOld = sourceIdNew;
			
			// Zone sud
			var southZone = Ext.getCmp('southZone');
			if (!southZone.hidden) {
				// Onglet : Top UGPN ou liste des medecins
				var grid2 = Ext.getCmp('grid2');
				if (!grid2.hidden) {
					$("#grid").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
					if (this.id == 'activite-equipe-id' || this.id == 'activite-periode-id' || this.id == 'activite-specialite-id') {
						// Modifications des settings activité 
						if (!ugp) {
							loadGridUGA(globalCodeUGP);
						} else {
							loadGrid(globalCodeUGP);
						}
					} else {
						// Modifications des settings non activité 
						if (!ugp) {
							loadGridUGA("");
						} else {
							loadGrid("");
						}
					}
				}
				// Onglet : Medecins 
				var grid3 = Ext.getCmp('grid3');
				if (!grid3.hidden) {
					$("#gridDoctors").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
					$('#loadGridDoctorsImg').css("display", "block");
					loadGridDoctors();
				}
			}
			
			// Mise à jour de la partie : informations
			refreshInformations();
		}); 
		
		// FENETRE POPUP de parametrage du graphe dynamique  
		var win = Ext.create('widget.window', {
            title: 'Parametrage',
            header: {
                titleAlign: 'center'
            },
            closable:		true,
            closeAction:	'hide',
            width:			600,
            minWidth:		350,
            height:			350,
            layout: {
                type: 'border',
                padding: 5
            },
            items: [
                {
                    region: 'center',
                    xtype: 'panel',
                    html: [
                           '<table>',
                           		'<tr id="periodeMarcheId">',
	                           		'<td class="text-general">',
	                           			'P&eacute;riode march&eacute; :',
	                           		'</td>',
		                           '<td class="text-general statesType">',
										'<select id="paramDynamicPeriodId">',
											'<option value="MM">Mensuel</option>',
											'<option value="CC">Cumul Mobile 3 mois</option>',
											'<option value="CA">Cumul Mobile Annuel</option>',
										'</select>',
									'</td>',
								'</tr>',
								'<tr>',
									'<td class="text-general">',
										'Indicateur produit :',
									'</td>',
									'<td class="text-general statesType">',
										'<select id="paramDynamicIndicateurId">',
										'</select>',
									'</td>',
								'</tr>',
							'</table>',
							'<div id="treeProducts"><img src="img/ajax-loader.gif" style="padding-right:5px;" /></div>'
							]
                }
            ]
        });
		
		// FENETRE POPUP de parametrage du graphe Bubble 
		var winBubble = Ext.create('widget.window', {
            title: 'Parametrage',
            header: {
                titleAlign: 'center'
            },
            closable:		true,
            closeAction:	'hide',
            width:			350,
            minWidth:		350,
            height:			130,
            layout: {
                type: 'border',
                padding: 5
            },
            items: [
                {
                    region: 'center',
                    xtype: 'panel',
                    html: [
                           '<div align="center">',
	                           '<table>',
									'<tr>',
										'<td class="text-general">',
											'Indicateur produit 1 :',
										'</td>',
										'<td class="text-general statesType">',
											'<select id="paramBubbleIndicateur1Id">',
											'</select>',
										'</td>',
									'</tr>',
									'<tr>',
										'<td class="text-general">',
											'Indicateur produit 2 :',
										'</td>',
										'<td class="text-general statesType">',
											'<select id="paramBubbleIndicateur2Id">',
											'</select>',
										'</td>',
									'</tr>',
									'<tr>',
										'<td class="text-general">',
											'Taille des bulles :',
										'</td>',
										'<td class="text-general" id="tailleBulleId">',
										'</td>',
									'</tr>',
								'</table>',
							'</div>'
							]
                }
            ]
        });
		
		// FENETRE POPUP de parametrage du graphe DeltaPM 
		var winDeltaPM = Ext.create('widget.window', {
            title: 'Parametrage',
            header: {
                titleAlign: 'center'
            },
            closable:		true,
            closeAction:	'hide',
            width:			350,
            minWidth:		350,
            height:			100,
            layout: {
                type: 'border',
                padding: 5
            },
            items: [
                {
                    region: 'center',
                    xtype: 'panel',
                    html: [
                           '<div align="center">',
	                           '<table>',
									'<tr>',
										'<td class="text-general">',
											'Indicateur produit :',
										'</td>',
										'<td class="text-general statesType">',
											'<select id="paramDeltaPMIndicateurId">',
											'</select>',
										'</td>',
									'</tr>',
								'</table>',
							'</div>'
							]
                }
            ]
        });
		
		// FENETRE POPUP de parametrage de la legende 
		var winLegende = Ext.create('widget.window', {
            title: 'Personnalisation',
            header: {
                titleAlign: 'center'
            },
            closable:		true,
            closeAction:	'hide',
            width:			600,
            minWidth:		350,
            height:			350,
            layout: {
                type: 'border',
                padding: 5
            },
            items: [
                {
                    region: 'center',
                    xtype: 'panel',
                    html: [
                           '<table class="text-general" id="carto-config-table">',
                           		'<tr>',
                           			'<td><b>Type&nbsp;de&nbsp;classement&nbsp;:</b></td>',
                           			'<td>',
	                           			'<input type="radio" name="classement" value="PE" id="classementPE" onclick="javascript:changementLegende();">Plages &eacute;gales',
										'<input type="radio" name="classement" value="DU" id="classementDU" onclick="javascript:changementLegende();">D&eacute;finition utilisateur',
										'<input type="radio" name="classement" value="NE" id="classementNE" onclick="javascript:changementLegende();">Nombre &eacute;gaux',
                           			'</td>',
                           		'</tr>',
                           		'<tr>',
	                       			'<td><b>Couleurs de base :</b></td>',
	                       			'<td>',
		                       			'<div style="float:left;">',
			                       			'<select id="carto-nbCouleurs-id" class="nbCouleurs" style="margin-right:10px;">',
												'<option value="2">2</option>',
												'<option value="3">3</option>',
											'</select>',
											'<input type="text" class="legendePalette" id="legendeCouleurBase1" />&nbsp;&nbsp;',
											'<input type="text" class="legendePalette" id="legendeCouleurBase2" />&nbsp;&nbsp;',
											'<input type="text" class="legendePalette" id="legendeCouleurBase3" />&nbsp;&nbsp;',
										'</div>',
										'<div id="buttonMAJPalette" style="float:left;margin-top:3px;"></div>',
	                       			'</td>',
	                       		'</tr>',
	                       		'<tr>',
	                       			'<td><b>Nombre&nbsp;de&nbsp;tranches&nbsp;:</b></td>',
	                       			'<td>',
		                       			'<select id="carto-nbTranches-id" class="nbTranches">',
											'<option value="3">3</option>',
											'<option value="4">4</option>',
											'<option value="5">5</option>',
											'<option value="6">6</option>',
											'<option value="7">7</option>',
										'</select>',
	                       			'</td>',
	                       		'</tr>',
	                       		'<tr>',
	                       			'<td><b>Palette de couleurs :</b></td>',
	                       			'<td>',
		                       			'<div id="legendesPalette" class="text-general" style="width:506px;">',
								   			'<input type="text" class="legendePalette" id="legendePalette1" style="display:none;" />&nbsp;&nbsp;',
								   			'<input type="text" class="legendePalette" id="legendePalette2" style="display:none;" />&nbsp;&nbsp;',
								   			'<input type="text" class="legendePalette" id="legendePalette3" style="display:none;" />&nbsp;&nbsp;',
								   			'<input type="text" class="legendePalette" id="legendePalette4" style="display:none;" />&nbsp;&nbsp;',
								   			'<input type="text" class="legendePalette" id="legendePalette5" style="display:none;" />&nbsp;&nbsp;',
								   			'<input type="text" class="legendePalette" id="legendePalette6" style="display:none;" />&nbsp;&nbsp;',
								   			'<input type="text" class="legendePalette" id="legendePalette7" style="display:none;" />',
							       		'</div>',
	                       			'</td>',
	                       		'</tr>',
	                       		'<tr>',
	                       			'<td align="right" id="legendeMinDeId">de</td>',
	                       			'<td>',
		                       			'<div id="legendesMin" class="text-general" style="width:506px;">',
			                       			'<div id="legendePaletteMin1Div" class="legendePaletteClass"></div>', 
		                       				'<div id="legendePaletteMin2Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMin3Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMin4Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMin5Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMin6Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMin7Div" class="legendePaletteClass"></div>',
							       		'</div>',
	                       			'</td>',
	                       		'</tr>',
	                       		'<tr>',
                       				'<td align="right" id="legendeMaxAId">&agrave;</td>',
	                       			'<td>',
		                       			'<div id="legendesMax" class="text-general" style="width:506px;">',
		                       				'<div id="legendePaletteMax1Div" class="legendePaletteClass"></div>', 
		                       				'<div id="legendePaletteMax2Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMax3Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMax4Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMax5Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMax6Div" class="legendePaletteClass"></div>',
		                       				'<div id="legendePaletteMax7Div" class="legendePaletteClass"></div>',
							       		'</div>',
	                       			'</td>',
	                       		'</tr>',
	                       		'<tr>',
	                       			'<td colspan="2" style="height:80px;">',  
	                       				'<div id="buttonSaveLegende" style="float:left;padding-left:200px;"></div>',
	                       				'<div id="buttonSaveTwoLegendes" style="float:left;padding-left:10px;"></div>',
	                       			'</td>',
	                       		'</tr>',
                           	'</table>'
	                    ]
                }
            ]
        });
		
		// BOUTON pour afficher la fenetre de parametrage du graphe dynamique  
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/config.png',
		    renderTo: 'buttonConfigId',
		    handler: function() {
		    }
		});
		var buttonConfig = Ext.get('buttonConfigId');
		buttonConfig.on('click', function(){
	        buttonConfig.dom.disabled = true;
	        if (win.isVisible()) {
	            win.hide(this, function() {
	            	buttonConfig.dom.disabled = false;
	            });
	        } else {
	            win.show(this, function() {
	            	// Chargement du jstree avec les produits 
	            	if (firstCallTreeProducts) {
	            		loadJsTreeProducts();
	            		$('#paramDynamicIndicateurId').html(listeIndicateurs);
	            		if (statutProduit == 'pasDeMarche' || statutProduit == 'incomplet') {
	            			$('#periodeMarcheId').css("display", "none");
	            		} 
	            		$("#paramDynamicPeriodId").bind("change", function(event, ui) {
	            			// On recharge le graphe dynamique 
	            			$("#buttonConfigId").css("display", "none");
	            	    	$("#graphDynamic").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
	        				loadGraphDynamic(globalNivGeog, globalGeog, idGeog);
	            	    });
	            		$("#paramDynamicIndicateurId").bind("change", function(event, ui) {
	            			// On recharge le graphe dynamique 
	            			$("#buttonConfigId").css("display", "none");
	            	    	$("#graphDynamic").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
	        				loadGraphDynamic(globalNivGeog, globalGeog, idGeog);
	            	    });
	            	}
	            	buttonConfig.dom.disabled = false;
	            });
	        }
	    });
		
		// BOUTON pour afficher la fenetre de parametrage du graphe Bubble   
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/config.png',
		    renderTo: 'buttonConfigBubbleId',
		    handler: function() {
		    }
		});
		var buttonConfigBubble = Ext.get('buttonConfigBubbleId');
		buttonConfigBubble.on('click', function(){
			buttonConfigBubble.dom.disabled = true;
	        if (winBubble.isVisible()) {
	            winBubble.hide(this, function() {
	            	buttonConfigBubble.dom.disabled = false;
	            });
	        } else {
	            winBubble.show(this, function() {
	            	
	            	// Information dans la fenetre de parametrage
	            	var tailleBulleSpan = "";
	            	if ($('#quotaRadioMarcheId').get(0).checked) {
	            		tailleBulleSpan = "quota march&eacute;";
	            	} else if ($('#quotaRadioProduitId').get(0).checked) {
	            		tailleBulleSpan = "quota produit";
	            	}
	            	if (globalNivGeog == 'UGA') {
	            		tailleBulleSpan = 'rang ugp';
	            	}
	            	$('#tailleBulleId').html(tailleBulleSpan);
	            	
	            	if ($('#paramBubbleIndicateur1Id').html() == '') {
	            		$('#paramBubbleIndicateur1Id').html(listeIndicateurs);
	            		$('#paramBubbleIndicateur2Id').html(listeIndicateurs);
	            		if (statutProduit == 'complet') {
	            			$('#paramBubbleIndicateur1Id').val('PM');
	            			$('#paramBubbleIndicateur2Id').val('D_PM');
	            		} else if (statutProduit == 'pasDeMarche') {
	            			$('#paramBubbleIndicateur1Id').val('VOL');
	            			$('#paramBubbleIndicateur2Id').val('EVOL_VOL');
	            		} else if (statutProduit == 'lancement') {
	            			$('#paramBubbleIndicateur1Id').val('PM');
	            			$('#paramBubbleIndicateur2Id').val('VOL');
	            		}
	            		$("#paramBubbleIndicateur1Id").bind("change", function(event, ui) {
	            			$("#graphBubble").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
	            			loadGraphBubble(globalNivGeog, globalGeog, idGeog);
	            	    });
	            		$("#paramBubbleIndicateur2Id").bind("change", function(event, ui) {
	            			$("#graphBubble").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
	            			loadGraphBubble(globalNivGeog, globalGeog, idGeog);
	            	    });
	            	}
	            	buttonConfigDeltaPM.dom.disabled = false;
	            });
	        }
	    });
		
		// BOUTON pour afficher la fenetre de parametrage du graphe DeltaPM  
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/config.png',
		    renderTo: 'buttonConfigDeltaPMId',
		    handler: function() {
		    }
		});
		var buttonConfigDeltaPM = Ext.get('buttonConfigDeltaPMId');
		buttonConfigDeltaPM.on('click', function(){
			buttonConfigDeltaPM.dom.disabled = true;
	        if (winDeltaPM.isVisible()) {
	            winDeltaPM.hide(this, function() {
	            	buttonConfigDeltaPM.dom.disabled = false;
	            });
	        } else {
	            winDeltaPM.show(this, function() {
	            	if ($('#paramDeltaPMIndicateurId').html() == '') {
	            		$('#paramDeltaPMIndicateurId').html(listeIndicateurs);
	            		if (statutProduit == 'complet') {
	            			$('#paramDeltaPMIndicateurId').val('D_PM');
	            		} else if (statutProduit == 'pasDeMarche') {
	            			$('#paramDeltaPMIndicateurId').val('EVOL_VOL');
	            		} 
	            		$("#paramDeltaPMIndicateurId").bind("change", function(event, ui) {
	            			$("#graphDeltaPm").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
	            			loadGraphDeltaPm(globalNivGeog, globalGeog, idGeog);
	            	    });
	            	}
	            	buttonConfigDeltaPM.dom.disabled = false;
	            });
	        }
	    });
		
		// BOUTON pour afficher la fenetre de parametrage de la legende Secteur 
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/config.png',
		    renderTo: 'buttonCartoSecteur',
		    handler: function() {
		    }
		});
		var buttonCartoSecteur = Ext.get('buttonCartoSecteur'); 
		buttonCartoSecteur.on('click', function(){
			buttonCartoSecteur.dom.disabled = true;
	        if (winLegende.isVisible()) {
	            winLegende.hide(this, function() {
	            	buttonCartoSecteur.dom.disabled = false;
	            });
	        } else {
	            winLegende.show(this, function() {
	            	
	            	if (firstCallLegendeConfiguration) {
	            		
	            		// Bouton pour sauvegarder le parametrage de la legende 
	            		Ext.create('Ext.Button', {
	            		    text: 'Sauvegarder',
	            		    renderTo: 'buttonSaveLegende',
	            		    handler: function() {
	            		    }
	            		});
	            		var buttonSaveLegende = Ext.get('buttonSaveLegende'); 
	            		buttonSaveLegende.on('click', function(){
	            	    	// Sauvegarde de la légende 
	            			if (checkConfigurationLegende()) {
	            				saveConfigurationLegende(); 
	            				winLegende.close();
	            			}
	            	    });
	            		
	            		// Bouton pour sauvegarder et appliquer le parametrage de la legende aux deux cartes
	            		Ext.create('Ext.Button', {
	            		    text: 'Appliquer aux deux cartes',
	            		    renderTo: 'buttonSaveTwoLegendes',
	            		    handler: function() {
	            		    }
	            		});
	            		var buttonSaveTwoLegendes = Ext.get('buttonSaveTwoLegendes'); 
	            		buttonSaveTwoLegendes.on('click', function(){
	            	    	// Sauvegarde de la légende 
	            			if (checkConfigurationLegende()) {
	            				saveTwoConfigurationLegendes(); 
	            				winLegende.close();
	            			}
	            	    });
	            		
	            		// Bouton pour mettre à jour la palette 
	            		Ext.create('Ext.Button', {
	            		    text: 'Mettre \xE0 jour la palette',
	            		    renderTo: 'buttonMAJPalette',
	            		    handler: function() {
	            		    }
	            		});
	            		var buttonMAJPalette = Ext.get('buttonMAJPalette'); 
	            		buttonMAJPalette.on('click', function(){
	            	    	changementLegende();
	            	    });
	            		
	            		firstCallLegendeConfiguration = false;
	            		
	            		// Changement du nombre de tranches 
	            		$(".nbTranches").bind("change", function(event, ui) {
	            			changementLegende();
	            		});
	            		
	            		// Changement du nombre de couleurs de base
	            		$(".nbCouleurs").bind("change", function(event, ui) {
	            			changementLegende();
	            		});
	            		
	            	}
	            	
	            	// Chargement de la légende au SECTEUR  
	            	legendeCartoRegion = false;
	            	loadConfigurationLegende();
	            	buttonCartoSecteur.dom.disabled = false;
	            });
	        }
	    });
		
		// BOUTON pour afficher la fenetre de parametrage de la legende Region 
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/config.png',
		    renderTo: 'buttonCartoRegion',
		    handler: function() {
		    }
		});
		var buttonCartoRegion = Ext.get('buttonCartoRegion'); 
		buttonCartoRegion.on('click', function(){
			buttonCartoRegion.dom.disabled = true;
	        if (winLegende.isVisible()) {
	            winLegende.hide(this, function() {
	            	buttonCartoRegion.dom.disabled = false;
	            });
	        } else {
	            winLegende.show(this, function() {
	            	
	            	if (firstCallLegendeConfiguration) {
	            		
	            		// Bouton pour sauvegarder le parametrage de la legende 
	            		Ext.create('Ext.Button', {
	            		    text: 'Sauvegarder',
	            		    renderTo: 'buttonSaveLegende',
	            		    handler: function() {
	            		    }
	            		});
	            		var buttonSaveLegende = Ext.get('buttonSaveLegende'); 
	            		buttonSaveLegende.on('click', function(){
	            	    	// Sauvegarde de la légende 
	            			if (checkConfigurationLegende()) {
	            				saveConfigurationLegende(); 
	            				winLegende.close();
	            			}
	            	    });
	            		
	            		// Bouton pour sauvegarder et appliquer le parametrage de la legende aux deux cartes
	            		Ext.create('Ext.Button', {
	            		    text: 'Appliquer aux deux cartes',
	            		    renderTo: 'buttonSaveTwoLegendes',
	            		    handler: function() {
	            		    }
	            		});
	            		var buttonSaveTwoLegendes = Ext.get('buttonSaveTwoLegendes'); 
	            		buttonSaveTwoLegendes.on('click', function(){
	            	    	// Sauvegarde de la légende 
	            			if (checkConfigurationLegende()) {
	            				saveTwoConfigurationLegendes(); 
	            				winLegende.close();
	            			}
	            	    });
	            		
	            		// Bouton pour mettre à jour la palette 
	            		Ext.create('Ext.Button', {
	            		    text: 'Mettre \xE0 jour la palette',
	            		    renderTo: 'buttonMAJPalette',
	            		    handler: function() {
	            		    }
	            		});
	            		var buttonMAJPalette = Ext.get('buttonMAJPalette'); 
	            		buttonMAJPalette.on('click', function(){
	            	    	changementLegende();
	            	    });
	            		
	            		firstCallLegendeConfiguration = false;
	            		
	            		// Changement du nombre de tranches 
	            		$(".nbTranches").bind("change", function(event, ui) {
	            			changementLegende();
	            		});
	            		
	            		// Changement du nombre de couleurs de base
	            		$(".nbCouleurs").bind("change", function(event, ui) {
	            			changementLegende();
	            		});
	            		
	            	}
	        		
	            	// Chargement de la légende à la REGION  
	            	legendeCartoRegion = true; 
	            	loadConfigurationLegende();
	            	buttonCartoRegion.dom.disabled = false;
	            });
	        }
	    });
		
		// Bouton pour retour  
		Ext.create('Ext.Button', {
		    text: 'Retour',
		    renderTo: 'backHome',
		    handler: function() {}
		});
		var backHome = Ext.get('backHome'); 
		backHome.on('click', function(){
			window.open("./welcome.do", "_self");
	    });
		
		// Bouton retour arriere sur les bubbles 
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/retour.gif',
		    renderTo: 'buttonBubbleBack',
		    handler: function() {
		    }
		});
		var buttonBubbleBack = Ext.get('buttonBubbleBack'); 
		buttonBubbleBack.on('click', function(){
			niveauPrecedantSecto(); // fonction défini dans specifTools.js 
	    });
		
		// Bouton retour arriere sur la carto region 
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/retour.gif',
		    renderTo: 'buttonCartoRegionBack',
		    handler: function() {
		    }
		});
		var buttonCartoRegionBack = Ext.get('buttonCartoRegionBack'); 
		buttonCartoRegionBack.on('click', function(){
			niveauPrecedantSecto(); // fonction défini dans specifTools.js 
	    });
		
		// Bouton retour arriere sur la carto secteur  
		Ext.create('Ext.Button', {
		    text: '',
		    icon: 'img/retour.gif',
		    renderTo: 'buttonCartoSecteurBack',
		    handler: function() {
		    }
		});
		var buttonCartoSecteurBack = Ext.get('buttonCartoSecteurBack'); 
		buttonCartoSecteurBack.on('click', function(){
			niveauPrecedantSecto(); // fonction défini dans specifTools.js 
	    });
		
	});
	
	// Lance la recuperation du parametrage 
	parametrages(); 
	
//	$('#button').click(function() {
//		var extremes = chartDyn.yAxis[1].getExtremes();
//		
//		// chartDyn.yAxis[1].tickInterval = extremes.dataMax / 10;
//		
//		var mm = (Math.round(chartDyn.yAxis[1].dataMax / chartDyn.yAxis[1].tickInterval) - 1) * chartDyn.yAxis[1].tickInterval + chartDyn.yAxis[1].tickInterval;
//		alert("mm=" + mm + ", tick=" + chartDyn.yAxis[1].tickInterval + ", dataMax=" + chartDyn.yAxis[1].dataMax +", dataMin=" + extremes.dataMin);
//		
//		chartDyn.yAxis[1].setExtremes(extremes.dataMin, mm);
//	});
	
});


//// Redimensionnement de la fenetre 
//$(window).resize(_.debounce(function(){
//	// Refresh the charts  
//	var graphDyn = Ext.getCmp('graphDyn');
//	if (!graphDyn.hidden) {
//		$("#buttonConfigId").css("display", "none");
//		$("#graphDynamic").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
//		loadGraphDynamic(globalNivGeog, globalGeog, idGeog);
//	}
//	var graphBub = Ext.getCmp('graphBub');
//	if (!graphBub.hidden) {
//		$("#graphBubble").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
//		loadGraphBubble(globalNivGeog, globalGeog, idGeog);
//	}
//	var graphDel = Ext.getCmp('graphDel');
//	if (!graphDel.hidden) {
//		$("#graphDeltaPm").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
//		loadGraphDeltaPm(globalNivGeog, globalGeog, idGeog);
//	}
//	var eastGraphQuota = Ext.getCmp('eastGraphQuota');
//	if (!eastGraphQuota.hidden) {
//		$("#graphQuota").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
//		loadGraphQuota(globalNivGeog, globalGeog, idGeog);
//	}
//	var southZone = Ext.getCmp('southZone');
//	if (!southZone.hidden) {
//		$("#grid").html('<img src="img/ajax-loader.gif" style="padding-right:5px;" />');
//		displayTable(resultTopUGPN);
//	}
//}, 2500));
